<template>
	<view class="binding_tel">
		<!-- <view class="back">
			<view class="icons" @click.stop="back">
				<uni-icons type="back" size="32"></uni-icons>
			</view>
		</view> -->
		<view class="title">
			手机号绑定
		</view>
		<view class="form">
			<view class="tel">
				<input type="text" v-model="tel" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholderClass" />
			</view>
			<view class="tel_code">
				<input type="text" v-model="code" placeholder="请输入短信验证码" placeholder-class="placeholderClass" />
				<view class="get_code" v-if="getFlag" @click="getCode">{{get_text}}</view>
				<view class="get_code" v-else>{{time}}秒后重新获取</view>
			</view>
		</view>
		<view class="submit" @click="submit">
			提交绑定
		</view>
		<!-- <view class="footer">
			<label class="radio">
				<radio  @click="changeRaido" value="1" :checked="raido" />
			</label>
			<view>
				我已阅读并同意 
				<text class="jump" @click="jump(4)">《用户协议》</text>
				<text class="jump" @click="jump(5)">《隐私声明》</text> 
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				code: '',
				get_text: "获取短信验证码",
				getFlag: true,
				time: 60,
				token: "",
				raido:true,
				jumpUrl:'',
			};
		},
		onLoad(option) {
			if (option.token) {
				this.token = option.token
			}
			this.getConfig()
		},
		methods: {
			getConfig(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result)
						this.jumpUrl = result.data.site_url
						this.$forceUpdate()
					}
				})
			},
			//跳转协议
			jump(i){
				console.log('123')
				uni.navigateTo({
					url:`/pages/my/agreement/agreement?infoId=${i}`
				})
			},
			//是否同意隐私政策
			changeRaido(){
				this.raido = !this.raido
			},
			//回退
			back(){
				uni.navigateBack()
			},
			//获取验证码
			getCode() {
				if (this.tel == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false;
				}
				this.getFlag = false
				var timer = setInterval(() => {
					this.time--
					if (this.time == 0) {
						clearInterval(timer)
						this.time = 60
						this.getFlag = true
					}
				}, 1000)
				// uni.setStorageSync('token',this.token)
				this.$http({
					url: '/api/user/get_code',
					header: {
						token: this.token
					},
					method: 'post',
					data: {
						phone: this.tel,
						type: "set_phone"
					},
					success: result => {
						console.log(result)
						uni.removeStorageSync('token')
					}
				})
			},
			//提交绑定
			submit() {
				if (this.tel == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
					return false;
				}
				if (this.code == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					})
					return false;
				}
				if(!this.raido){
					uni.showToast({
						title:'请查看并同意用户协议与隐私政策',
						icon:"none"
					})
					return false;
				}
				this.$http({
					url: '/api/user/edit_phone',
					method: 'post',
					header: {
						token: this.token
					},
					data: {
						phone: this.tel,
						code: this.code
					},
					success: result => {
						console.log(result)
						if (result.code == 200) {
							uni.showToast({
								title: '绑定成功'
							})
							uni.setStorageSync('token', this.token)
							if(uni.getStorageSync('order_url')){
								window.location.href=uni.getStorageSync('order_url')
							}else{
								window.location.href= this.jumpUrl + '/#/pages/index/index'
							}
							// setTimeout(() => {
							// 	uni.switchTab({
							// 		url: '/pages/my/index'
							// 	})
							// }, 1500)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.binding_tel {
		width: 100%;
		height: 100%;
		padding: 100px 0;
		box-sizing: border-box;
		.back{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
			width: 100%;
			height: 79px;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-start;
			.icons{
				padding: 5px 5px;
				margin-left: 10px;
			}
		}
		.title{
			text-align: center;
			font-size: 28px;
			font-weight: bold;
		}
		.form {
			margin: 100px 30px;
			margin-top: 50px;
			>view {
				height: 44px;
				border-bottom: 0.5px solid rgba(0, 0, 0, .06);
				// line-height: 55px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #F4F5F7;
				border-radius: 44px;
				margin: 10px 0;
				>input {
					flex: 1;
					padding-left: 20px;
				}

				>text {
					width: 100px;
				}

				.get_code {
					width: 120px;
					height: 30px;
					line-height: 30px;
					color: #10C77C;
				}

				.placeholderClass {
					font-size: 13px;
					color: rgb(153, 153, 153);
				}
			}
		}

		.submit {
			margin: 0 80px;
			height: 50px;
			line-height: 50px;
			color: #fff;
			background-color: #10C77C;
			font-size: 17px;
			font-weight: bold;
			border-radius: 35px;
			text-align: center;
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28.6upx;
			font-size: 28upx;
			// color:;
			.jump{
				color: #11c87c;
			}
		}
	}
</style>
